<style lang="scss">
    .my-checkbox-group {
        .el-checkbox.is-bordered.is-checked {
            border-color: #409EFF;
        }

        .is-disabled.is-checked {
            .el-checkbox__input {
                .el-checkbox__inner {
                    background-color: #409EFF;
                    border-color: #409EFF;
                }

                .el-checkbox__inner:after {
                    border-color: #fff;
                }
            }

            .el-checkbox__label {
                color: #409EFF;
            }
        }
    }
</style>

<template>
    <el-checkbox-group class="my-checkbox-group" v-model="modelList" size="medium" @change="doChange" :disabled="disabled">
        <el-checkbox v-for="(item, index) in dataList" :key="index" :label="item[id]" border>
            {{item[label]}}
        </el-checkbox>
    </el-checkbox-group>
</template>

<script>
    export default {
        name: 'my-checkbox-group',
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            dataList: {},
            id: ,
            label: ,
            disabled: false,
            value: {}
        },
        data () {
            return {
                modelList: [],
                checkedList: []
            }
        },
        methods: {
            doChange (checkedArr) {
                this.checkedList = []
                for (let checked of checkedArr) {
                    for (let item of this.dataList) {
                        if (item[this.id] === checked) {
                            this.checkedList.push(item)
                        }
                    }
                }
                this.$emit('change', this.checkedList)
            },
        },
        watch: {
            value (newValue) {
                this.modelList = []
                for (let value of newValue) {
                    for (let item of this.dataList) {
                        if (item[this.id] === value[this.id]) {
                            this.modelList.push(item[this.id])
                        }
                    }
                }
            }
        },
        components: {},
        computed: {},
        mounted: function () {
        }
    }
</script>
